<template>
  <el-card class="page-tools">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <div class="before">
          <!-- 左边内容 -->
          <el-button type="primary" @click="addFn">添加分类</el-button>
          <!-- 定义前面得插槽 -->
        </div>
      </el-col>
      <el-col>
        <el-row type="flex" justify="end">
          <!-- 右边内容 -->
          <el-input v-model="title_contains" placeholder="请输入关键字" @input="input" />
          <el-button @click="search">
            <i class="el-icon-search" />
          </el-button>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      title_contains: ''
    }
  },
  methods: {
    addFn() {
      this.$emit('isShowDialog')
    },
    search() {
      this.$emit('search', this.title_contains)
    },
    // 监听输入框的值 当清空了之后 要回显所有数据
    input() {
      if (this.title_contains.length === 0) {
        console.log(1)
        this.$emit('input')
      }
    }
  }

}
</script>

<style lang='scss' scoped>
 .page-tools {
    margin: 10px 0;
 }

</style>
